{% extends 'base.html' %}
{% load static %}
{% block css %}
    <link href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
    <link href="static/assets/sweet-alert/sweet-alert.min.css">
    <style>
        .tag-title {
            line-height: 30px;
            padding: 5px 15px;
            border: 1px solid #e7eaec;
            border-bottom: none;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .tag-title a {
            float: right
        }

        .list-group-item:first-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .fixed-table-container {
            height: auto !important;
        }

        .transferBox {
            height: 100%;
            border: 1px solid #beb8b8;
            border-radius: 2px;
            overflow-y: scroll
        }

        .error-msg {
            color: red
        }
    </style>
{% endblock %}
{% block title %}
    GPU机器列表
{% endblock %}
{% block page-title %}
    GPU机器列表
{% endblock %}
{% block page-content %}
    <div class="row">
        <div class="col-lg-12">
            <ul class="nav nav-tabs">
                <li class="">
                    <a href="{% url 'cmdb:storagelist' %}" aria-expanded="true">
                        <span class="visible-xs"><i class="fa fa-server"></i></span>
                        <span class="hidden-xs">存储机器</span>
                    </a>
                </li>
                <li class="active">
                    <a href="{% url 'cmdb:gpulist' %}" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
                        <span class="hidden-xs">GPU机器</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="hosts">
                    <div class="row" style="margin-bottom: 5px">
                        <div class="col-md-1">
                            <button id="update-host-info" class="btn btn-primary btn-sm" title="同步矿场资产到管理平台">
                                同步资产
                            </button>
                        </div>
                        <div class="col-md-2" style="float: right">
                            <form class="form-horizontal" role="form">
                                <div class="input-group">
                                    <input type="text" id="keyword" name="keyword"
                                           value="{{ keyword|default_if_none:'' }}" class="form-control"
                                           placeholder="关键字">
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-effect-ripple btn-primary">搜索</button>
                                        </span>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <table class="table table-bordered" style="width: 100%">
                                <thead>
                                <tr>
                                    <th class="text-center">IP</th>
                                    <th class="text-center">CPU核数</th>
                                    <th class="text-center">内存大小(GB)</th>
                                    <th class="text-center">GPU数量</th>
                                    <th class="text-center">所属矿场</th>
                                    <th class="text-center">节点状态</th>
                                    <th class="text-center">挂载机器</th>
                                    <th class="text-center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for host in object_list %}
                                    <tr class="{{ host.id }}">
                                        <td class="text-center">{{ host.ip }}</td>
                                        <td class="text-center">{{ host.cpu_cores }}</td>
                                        <td class="text-center">{{ host.total_memory }}</td>
                                        <td class="text-center">{{ host.gpu_numbers }}</td>
                                        <td class="text-center">{{ host.area }}</td>
                                        <td class="text-center">{{ host.node_status }}</td>
                                        <td class="text-center">{{ host.mount_with }}</td>
                                        <td class="actions text-center">
                                            <a href="{% url 'cmdb:gpumodify' host.id %}"
                                               class="btn btn-primary btn-xs">修改</a>
                                            <a href="{% url 'cmdb:gpudel' host.id %}"
                                               class="btn btn-danger btn-xs">删除</a>
                                        </td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan="15" class="text-center">没有主机……</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            <div class="row">
                                <div class="col-md-4">
                                    <p style="margin-top: 10px"> 显示 [{{ page_obj.paginator.count }}] 条数据中的 第
                                        [{{ page_obj.start_index }}] 至 [{{ page_obj.end_index }}] 的数据</p>
                                </div>
                                <div class="col-md-8">
                                    {% if page_obj.paginator.num_pages > 1 %}
                                        {% include '_paginator.html' %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="/static/assets/sweet-alert/sweet-alert.min.js"></script>
    <script>
        $(function () {
            $('#update-host-info').click(function () {
                $.get("/update_host_info/", function (data) {
                    console.log(data)
                    alert(data)
                });
            })
        })
    </script>
    <script>
        $('.cmdb').addClass('active');
        $('.cmdb .assets').addClass('active');
    </script>
{% endblock %}
